<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="m" value="${movie_info}" />
<!--검색질의 -->
<c:set var="qury" value="&findtype=${ftype}&findkey=${fkey}" />
<c:set var="burl" value="?cpage=" />

<link rel="stylesheet" type="text/css" href="css/jquery.rating.css" />
<link type="text/css" href="css/movie_in.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<link rel="stylesheet" type="text/css"
	href="css/sequencejs-theme.modern-slide-in.css" />
<script src="js/modernizr.custom.17475.js"></script>
<!--contents 시작 -->
<div id="contents">
	<%@ include file="../tiles/movmn.jspf"%>
	<ul id="loca">
		<li><a href="">홈</a>&nbsp;&gt;</li>
		<li><a href="">영화</a></li>
	</ul>
	<div id="wwrap">
		<div id="photo">
			<a data-toggle="modal" data-target="#imgModal" href="#"> <img
				src="image.bi?id=poster/${m.movno}.jpg" alt="영화 포스터"
				title="${ m.title }" /></a>
		</div>
		<div id="wrap2">
			<h1 id="title">${m.title}</h1>
			<ul id="info1">
				<li><strong>감 독</strong>${m.director}</li>
				<li><strong>출 연</strong>${m.actor1}&nbsp;/&nbsp;${m.actor2}&nbsp;/&nbsp;${m.actor3}</li>
				<li><strong>기본정보</strong> <c:choose>
						<c:when test="${ m.rate eq '1' }">전체 관람가</c:when>
						<c:when test="${ m.rate eq '2' }">12세 관람가</c:when>
						<c:when test="${ m.rate eq '3' }">15세 관람가</c:when>
						<c:when test="${ m.rate eq '4' }">청소년 관람불가</c:when>
					</c:choose>&nbsp;/&nbsp; ${m.runningtime}&nbsp;/&nbsp;
					${m.genre1}&nbsp;&nbsp;${m.genre2}&nbsp;&nbsp;${m.genre3}</li>
				<li><strong>개 봉 일</strong>${m.playdate}</li>
				<li><button type="button" class="btn btn-danger" id="rsrvbtn"
						onclick="location='reservation.bi?movno=${m.movno}'">
						예매하기</button></li>
			</ul>
		</div>
	</div>

	<div id="wrap4">
		<div id="container">
			<div class="main">
				<ul id="carousel" class="elastislide-list">
					<c:forEach var="i" begin="1" end="10">
						<li><a href="#pic"><img
								src="image.bi?id=thum/${m.movno}_${i}.jpg" alt="small" /></a></li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>

	<!-- tab 시작 -->
	<div id="bttabs">
		<ul class="nav nav-tabs clearf" id="myTab">
			<li class="active"><a href="#simple" data-toggle="tab">주요내용</a></li>
			<li><a href="#staff" data-toggle="tab">배우 / 감독</a></li>
			<li><a href="#video" data-toggle="tab">동영상</a></li>
			<li><a href="#pic" data-toggle="tab">스틸컷</a></li>
			<li><a href="#comment" data-toggle="tab">평점 / 댓글</a></li>
		</ul>
		<div class="tab-content clearf">
			<div class="tab-pane fade in active" id="simple">
				<h1>시놉시스</h1>
				<div id="synop">${m.synop}</div>
			</div>
			<!-- end simple -->
			<div class="tab-pane fade" id="staff">
				<div id="actor">
					<h1>배우</h1>
					<figure>
						<img src="image.bi?id=staff/${m.movno}_1.jpg" alt="${m.actor1}"
							title="${m.actor1}">
						<figcaption>${m.actor1}</figcaption>
					</figure>
					<figure>
						<img src="image.bi?id=staff/${m.movno}_2.jpg" alt="${m.actor2}"
							title="${m.actor1}">
						<figcaption>${m.actor2}</figcaption>
					</figure>
					<figure>
						<img src="image.bi?id=staff/${m.movno}_3.jpg" alt="${m.actor3}"
							title="${m.actor1}">
						<figcaption>${m.actor3}</figcaption>
					</figure>
				</div>
				<div id="director">
					<h1>감독</h1>
					<figure>
						<img src="image.bi?id=staff/${m.movno}_4.jpg" alt="${m.director}"
							title="${m.director}">
						<figcaption>${m.director}</figcaption>
					</figure>
				</div>
			</div>
			<!-- end staff -->
			<div class="tab-pane fade" id="video">
				<h1>예고편</h1>
				<video preload="auto" controls="controls" src="${ m.videourl }">
				</video>
			</div>
			<div class="tab-pane fade" id="pic">
				<div class="sequence-theme">
					<div id="sequence">
						<span class="sequence-prev"></span> <span class="sequence-next"></span>
						<ul class="sequence-canvas">
							<c:forEach var="i" begin="1" end="10">
								<li class="animate-in"><img class="model"
									src="image.bi?id=still/${m.movno}_${i}.jpg" /></li>
							</c:forEach>
						</ul>
						<ul class="sequence-pagination">
							<c:forEach var="i" begin="1" end="10">
								<li><img src="image.bi?id=thum/${m.movno}_${i}.jpg" /></li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			<!-- end pic -->
			<div class="tab-pane fade" id="comment">
				<h1>평점 / 댓글</h1>
				<div id="comm" class="tab_content"
					style="width: 850px; height: 800px;">
					<div id="comm_w">
						<form method="post" name="board" id="commentFrm">
							<div id="starsrating">
								<img src="images/star.png" id="starimg" /> <select name="stars"
									id="stars">
									<option value="10" data-image="images/chw-icons/star5.png">별10</option>
									<option value="9" data-image="images/chw-icons/star5.png">별9</option>
									<option value="8" data-image="images/chw-icons/star5.png">별8</option>
									<option value="7" data-image="images/chw-icons/star5.png">별7</option>
									<option value="6" data-image="images/chw-icons/star5.png">별6</option>
									<option value="5" data-image="images/chw-icons/star5.png">별5</option>
									<option value="4" data-image="images/chw-icons/star4.png">별4</option>
									<option value="3" data-image="images/chw-icons/star3.png">별3</option>
									<option value="2" data-image="images/chw-icons/star2.png">별2</option>
									<option value="1" data-image="images/chw-icons/star1.png">별1</option>
									<option value="0" data-image="images/chw-icons/star1.png">별0</option>
								</select>
							</div>
							<div id="commtext">
								<textarea name="comment" id="comment" placeholder="댓글 작성"></textarea>
							</div>
							
							<input type="hidden" name="cpage" value="${m.movno}" />

							<div id="btn">
								<button type="submit" id="testbutton" class="btn btn-primary">등 록</button>
							</div>
						</form>
					</div>
					<div id="content5">

						<table>
							<colgroup>
								<col style="width: 10%" />
								<col style="width: 10%" />
								<col style="width: 70%" />
								<col style="width: 10%" />
							</colgroup>
							

							<!-- 제목행 시작 -->
							<tr>
								<th><h3>NUM</h3></th>
								<th><h3>STARS</h3></th>

								<th><h3>COMMENT</h3></th>
								<th><h3>DATE</h3></th>
							</tr>

							<!-- 제목행 끝 -->
							<c:forEach var="v" items="${listBoards}">
								<!-- 본문행 출력시작 -->
								<tr class="center">
									<td>${v.movno}</td>
									<td>${v.stars}</td>

									<td><div class="commview">${v.comment}</div></td>
									<td>${v.comm_wdate.substring( 0, 10 ) }</td>

								</tr>
								<!-- 본문행 출력끝 -->
								<%-- 게시물 글번호 수정 --%>
								<c:set var="startbno" value="${ startbno-1 }" />
							</c:forEach>
						</table>
						<p class="center">
							<a href="${burl}1&movno=${m.movno}" title="처음 페이지로 이동합니다"> 처음
							</a>
							<c:if test="${ cpage ne 1 }">
								<a href="${burl}${ cpage-1 }${qury}&movno=${m.movno}"
									title="이전 -1 페이지"> ◀ </a>
							</c:if>
							◁◁
							<c:forEach var="p" begin="${startnav}" end="${startnav+9}">
								<c:if test="${ p le allpage }">

									<c:if test="${ cpage eq p }">
										<span class="cpage"> ${p} </span>
									</c:if>
									<c:if test="${ cpage ne p }">
										<a href="${burl}${p}${qury}&movno=${m.movno}"> ${p}</a>
									</c:if>
								</c:if>
							</c:forEach>
							▷▷ <a href="${burl}${ cpage+1 }${qury}&movno=${m.movno}"
								title="다음 +1 페이지"> ▶ </a> <a
								href="${burl}${allpage}${qury}&movno=${m.movno}"
								title="처음 페이지로 이동합니다"> 끝 </a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end tab -->
<script src="js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" id="imgModal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h2 class="modal-title" id="myModalLabel">${ m.title }</h2>
			</div>
			<div class="modal-body">
				<img src="image.bi?id=poster/${m.movno}.jpg" alt="${ m.title }"
					title="${ m.title }" />
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<!-- image slide -->
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
	$('#carousel').elastislide();
</script>
<!-- bootstrap tap -->
<script>
	$('#myTab a').click(function(e) {
		e.preventDefault();
		$(this).tab('show');
	});
</script>
<!-- bootstrap tap -->
<script>
	//본문 줄바꿈 처리
	var c = document.getElementById("synop");
	c.innerHTML = c.innerHTML.replace(new RegExp('\r?\n', 'g'), "<br />");
	var c2 = document.getElementsByClassName("commview");
	for (var i = 0; i<c2.length; ++i){
		c2[i].innerHTML = c2[i].innerHTML.replace(new RegExp('\r?\n', 'g'), "<br />");
	}
</script>

<script src="js/jquery.sequence-min.js"></script>
<script src="js/sequencejs-options.modern-slide-in.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var sequence = $("#sequence").sequence(options).data("sequence");
	});
</script>

<script type="text/javascript">
	$(document).ready(function(e) {
		try {
			$("body select").msDropDown();
		} catch (e) {
			alert(e.message);
		}
	});
</script>

<script type="text/javascript">
	var findbtn = document.getElementById("findbtn");
	findbtn.onclick = function() {
		var ftype = document.getElementsByName("findtype")[0].value;
		var fkey = document.getElementsByName("findkey")[0].value;
		var url = "";
		var find = "?findtype=" + ftype + "&findkey=" + fkey;
		location.href = url + find;
	};
</script>

